<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <style type="text/css">
	*{margin: 0;padding: 0;}
	body{
		text-align: center;
		text-align: center;
    	background-color: #f6f6f6;
		
	}
	#main{
       	margin: 0 auto;
		width: 1400px;
		height: 800px;
		background-image: url("../static/img/loginback.jpg");
		background-size: 100% auto;
		position: relative;
	}
	#box{
		position: absolute;
		top:200px;
		left: 450px;
		width: 500px;
		height: 400px;
		border: 5px dashed #96674d;
		border-radius: 30px;
		margin: 0 auto;
		background-color: #efd286;
		opacity: 0.75;
	}
	.bt{
		margin-left: 50px;
		margin-right: 50px;
		font-weight: bold;
		font-size: 30px;
		color: black; 
		text-align: center;
		line-height: 50px;
		cursor: pointer;
	}
	#log{
		margin: 0 auto
		width: 450px;
		height: 350px;
	}
	#zhuce{
		margin: 0 auto
		width: 450px;
		height: 450px;
		display: none;
	}
	.lb{
		font-weight: bold;
		color: black;
		font-size: 25px;
	}
	input{
		text-align: center;
		border-radius: 5px;
		width: 200px;
		height: 30px;
	}
	#loginbt,#Zzhucebt{
		font-size: 25px;
		font-weight: bold;
		width: 200px;
		height: 50px;
		margin: 0 auto;
		border-radius: 5px;
		cursor: pointer;
	}
	#logbt:hover,#zhucebt:hover{
		color: white;
	}
	#welcome{
		padding-top: 30px;
		color: white;
		font-size: 50px;
		letter-spacing: 25px;
	}
	#zctips,#logintips{
		color: red;
		font-size: 18px;
		font-weight: bold;
	}
  </style>
</head>
<body>
<div id="main">
	<h1 id="welcome">请出示DataView通行证</h1>
	<div id="box">
	<span class="bt" id="logbt">登录</span>
	<span class="bt" id="zhucebt">注册</span>
		<div id="log">	
			<br><br><br><br>
			<form action="/yanzheng" method="POST">
				<label class="lb">账号</label>
				<input type="text" id="username" name="username">
				<br><br>
				<label class="lb">密码</label>
				<input type="password" id="password" name="password">
				<br><br>
				<label id="logintips">{{error|safe}}</label>
				<br><br>
				<button id="loginbt">登录</button>
			</form>
		</div>
		<div id="zhuce">
			<br><br><br><br>
				<label class="lb">账号</label>
				<input type="text" id="Zusername" placeholder="长度限制6-11位">
				<br><br>
				<label class="lb">密码</label>
				<input type="password" id="Zpassword" placeholder="长度限制6-16位">
				<br><br>
				<label id="zctips"></label>
				<br><br>
				<button id="Zzhucebt">注册</button>
		</div>
	</div>
</div>
</body>
<script src="../static/js/jquery.js"></script>
<script type="text/javascript">
	//点击登录,弹出登录div
	$("#logbt").click(function(){
		$("#zhuce").hide();
		$("#log").show();
	});
	//点击注册,弹出注册div
	$("#zhucebt").click(function(){
		$("#log").hide();
		$("#zhuce").show();
	});

	//点击注册,创建账号
	$("#Zzhucebt").click(function(){
		if ($("#Zusername").val().length <= 11 && $("#Zpassword").val().length <= 16 &&
			$("#Zusername").val().length >= 6  && $("#Zpassword").val().length >= 6
			){
			$("#zctips").text("")
			$.ajax({
		            url: '/zhuce',
		            data: {
		                username: $("#Zusername").val(),
		                password: $("#Zpassword").val()
		            },
		            type: 'POST',
		            dataType: 'JSON',
		        }).done(function (data) {
		        	//账号已存在
		        	if(data.isCreate == "isUserName"){
		        		$("#zctips").text("账号以存在");
		        	}else if(data.isCreate == "success"){
						$("#zctips").text("账号创建成功");
		        	}else if (data.isCreate == "failed") {
						$("#zctips").text("账号创建失败");
		        	}
			});		
		}else{
			$("#zctips").text("账号或密码不符合规范");
		}
		
	});

</script>
</html>